Estoy un poco confundido, para algunos tutoriales use # para obtener la entrada, mientras que algunos usan [(ngModel)] . ¿Cuál es la diferencia efectiva entre los dos?
#xxx
#xxx le permite obtener una referencia de elemento.
<input #inp (change)="foo = inp.value"> escucha el evento de cambio y llama a onChange() y pasa la propiedad de value de entrada
Para encuadernación bidireccional también necesita
<input #inp (change)="foo = inp.value)" [value]="foo = $event">NgModelo
<input [(ngModel)]="foo"> utiliza la directiva NgModel que permite integrar elementos de entrada DOM y componentes personalizados en la funcionalidad de forma Angular. También se puede utilizar sin formulario. NgModel es una abstracción sobre todo tipo de elementos y componentes, mientras que el ejemplo anterior ( #inp ) solo funciona para elementos de entrada que tienen una propiedad de value y emiten un evento de change .
[(ngModel)]="foo"es la forma corta de
[ngModel]="foo" (ngModelChange)="foo = $event"que muestra que es para encuadernación bidireccional.
insinuación
#xxx devuelve una instancia de componente o directiva, si el elemento no es un elemento DOM simple sino un componente Angular o tiene aplicada una directiva Angular.
La sintaxis #name es una referencia de plantilla que se refiere al objeto html, se puede encontrar más información en los documentos de Angular: Guía de plantilla de Angular
El [(ngModel)] establece un enlace bidireccional en el valor de los elementos y lo asigna a una variable.
La variable de referencia de plantilla solo se usa para acceder a las propiedades dom del elemento. Entonces, para dos enlaces o cualquier cambio, debemos escribir
-> pero al usar el enlace ngmodel que ayuda en el enlace de datos bidireccional angular se puede hacer en breve por: ->